'use client'
import Image from "next/image"
import { Input } from '@/components/ui/input'
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { Category, Tabs } from "./_components"
import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem } from "@/components/ui/pagination"
import { ReactLenis } from 'lenis/react'
import { useGSAP } from "@gsap/react"
import gsap from "gsap"

const News = () => {

  useGSAP(() => {
    // 元素进入动画
    gsap.from('.news-list li', {
      opacity: 0,
      y: -20,
      stagger: 0.2, // 每个元素的延迟时间
      duration: 0.8,
      ease: 'power2.out',
      delay: 0.7
    })
  })

  return (
    <ReactLenis root>
      <div>
        <section>
          <div className="h-auto md:h-[450px] lg:h-[550px] xl:h-[750px] bg-[url('/images/news-banner.jpg')] bg-no-repeat bg-center bg-cover">
            <div className="w-[1650px] max-1650:w-auto px-[10px] lg:px-[20px] py-[20px] md:py-0 mx-auto block md:flex items-center justify-between h-full">
              <div>
                <h2 className="text-[26px] md:text-[34px] lg:text-[40px] xl:text-[48px] leading-[26px] md:leading-[34px] xl:leading-[48px] text-center md:text-left font-bold text-white mb-[15px] lg:mb-[20px] xl:mb-[32px]">资讯与资料</h2>
                <div className="w-[220px] mx-auto md:mx-0 md:w-[300px] lg:w-[400px] xl:w-[550px] h-[50px] md:h-[75px] lg:h-[100px] xl:h-[125px] relative mb-[20px] md:mb-0">
                  <Image alt="" src='/images/news-banner-text.png' fill />
                </div>
              </div>
              <div className="bg-white/90 rounded-tl-[10px] md:rounded-tl-[20px] lg:rounded-tl-[60px] rounded-tr-[10px] md:rounded-tr-none rounded-b-[10px] md:rounded-b-none pr-[10px] md:pr-0 pt-[10px] md:pt-[30px] lg:pt-[50px] xl:pt-[76px] pl-[10px] md:pl-[30px] lg:pl-[40px] xl:pl-[66px] pb-[10px] md:pb-[30px] lg:pb-[50px] xl:pb-[86px] relative before:hidden md:before:block before:absolute before:left-[100%] before:top-0 before:bottom-0 before:w-[100vw] before:bg-white/90">
                <div className="flex items-stretch rounded-[5px] border border-[#488BD8] w-auto lg:w-[500px] xl:w-[600px] 2xl:w-[750px]">
                  <Input placeholder="搜索资讯资料" className='px-[10px] lg:px-[15px] xl:px-[20px] py-[7px] lg:py-[12px] xl:py-[18px] h-auto placeholder:text-[#BDBDBD] placeholder:text-sm xl:placeholder:text-[16px] leading-[16px] text-[16px]' />
                  <Button className='rounded-none bg-[#1456A2] h-auto text-sm lg:text-base xl:text-[18px] w-[90px] lg:w-[114px] select-none text-white hover:bg-[#1d3858]'>搜索</Button>
                </div>
                <ul className="space-y-[10px] lg:space-y-[15px] xl:space-y-[20px] mt-[15px] md:mt-[22px] xl:mt-[38px]">
                  <li>
                    <Link href='https://mp.weixin.qq.com/s/osIqeYqZpVZryW7mGRDK1g' target='_blank' className="text-sm xl:text-[18px] text-[#333] hover:text-[#1456A2] transition-colors flex items-center justify-between">
                      <span className="line-clamp-1 flex-1 mr-[30px]">保研，从来不是一场公平的竞争。</span>
                      <span className="text-[#999] text-xs md:text-sm">2025-01-20</span>
                    </Link>
                  </li>
                  <li>
                    <Link href='https://mp.weixin.qq.com/s/0OfWgq37z7WjVAtqOPR7SQ' target='_blank' className="text-sm xl:text-[18px] text-[#333] hover:text-[#1456A2] transition-colors flex items-center justify-between">
                      <span className="line-clamp-1 flex-1 mr-[30px]">《教育部认可84大保研加分竞赛盘点表》.xlsx</span>
                      <span className="text-[#999] text-xs md:text-sm">2025-01-20</span>
                    </Link>
                  </li>
                  <li>
                    <Link href='https://mp.weixin.qq.com/s/jkDa3PG07lFoSabeSuvX-A' target='_blank' className="text-sm xl:text-[18px] text-[#333] hover:text-[#1456A2] transition-colors flex items-center justify-between">
                      <span className="line-clamp-1 flex-1 mr-[30px]">假如你从大三上的十一月开始准备保研……</span>
                      <span className="text-[#999] text-xs md:text-sm">2025-01-20</span>
                    </Link>
                  </li>
                  <li>
                    <Link href='https://mp.weixin.qq.com/s/mnOCZJyf0Vz_fbVil9kY7g' target='_blank' className="text-sm xl:text-[18px] text-[#333] hover:text-[#1456A2] transition-colors flex items-center justify-between">
                      <span className="line-clamp-1 flex-1 mr-[30px]]">爽文！211第1，六级566，大撞车放弃复交，保研脱轨…做对关键决断上岸人大！</span>
                      <span className="text-[#999] text-xs md:text-sm">2025-01-20</span>
                    </Link>
                  </li>
                  <li>
                    <Link href='https://mp.weixin.qq.com/s/wUhVHtrESMHqS6BESw6M8Q' target='_blank' className="text-sm xl:text-[18px] text-[#333] hover:text-[#1456A2] transition-colors flex items-center justify-between">
                      <span className="line-clamp-1 flex-1">突发！教育部官宣：全面禁止院校出身歧视！</span>
                      <span className="text-[#999] text-xs md:text-sm">2025-01-20</span>
                    </Link>
                  </li>
                  <li>
                    <Link href='https://mp.weixin.qq.com/s/aPZF0SQE4RVTqG4S65XRtQ' target='_blank' className="text-sm xl:text-[18px] text-[#333] hover:text-[#1456A2] transition-colors flex items-center justify-between">
                      <span className="line-clamp-1 flex-1 mr-[30px]">清华大学：第一学期成绩不计入GPA！</span>
                      <span className="text-[#999] text-xs md:text-sm">2025-01-20</span>
                    </Link>
                  </li>
                  <li>
                    <Link href='https://mp.weixin.qq.com/s/LGRO9iZlpfvRojQ73bZnDQ' target='_blank' className="text-sm xl:text-[18px] text-[#333] hover:text-[#1456A2] transition-colors flex items-center justify-between">
                      <span className="line-clamp-1 flex-1 mr-[30px]">分学科真题 | 电子信息保研笔面试真题200+题（免费领）</span>
                      <span className="text-[#999] text-xs md:text-smtext-smtext-xs md:text-sm">2025-01-20</span>
                    </Link>
                  </li>
                  <li>
                    <Link href='https://mp.weixin.qq.com/s/ucMagRlp3FL7mbDcdTMkfA' target='_blank' className="text-sm xl:text-[18px] text-[#333] hover:text-[#1456A2] transition-colors flex items-center justify-between">保研答疑 | 什么时候联系导师比较合适？怎么选择导师？<span className="text-[#999] text-xs md:text-smtext-smtext-xs md:text-sm">2025-01-20</span></Link>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </section>
        <section>
          <div className="w-[1650px] max-1650:w-auto px-[10px] lg:px-[20px] mx-auto">
            <Category />
            <Tabs />
          </div>
          <div className="mb-[30px] pb-0 md:pb-[50px] 2xl:pb-[90px]">
            <ul className="news-list w-[1650px] max-1650:w-auto px-[10px] lg:px-[20px] mx-auto">
              <li className="border-b border-[#E2E2E2] py-[10px] lg:py-[20px] xl:py-[38px] group">
                <Link href='#' className="flex items-start group">
                  <div className="relative w-[160px] md:w-[210px] h-[110px] md:h-[138px] lg:h-[143px] rounded-[10px] overflow-hidden mr-[10px] md:mr-[20px] lg:mr-[54px]">
                    <Image src='https://picsum.photos/210/143' alt="" fill className="group-hover:scale-110 transition-all duration-500" />
                  </div>
                  <div className="flex-1">
                    <h3 className="text-[14px] md:text-base xl:text-[20px] md:leading-[20px] mb-[8px] md:mb-[15px] text-[#333] line-clamp-1 group-hover:text-[#1456A2] transition-colors">《教育部认可84大保研加分竞赛盘点表》.xlsx</h3>
                    <p className="text-xs md:text-sm xl:text-base text-[#999] md:leading-[22px] max-w-[1000px] mb-[5px] md:mb-[10px] lg:mb-[16px] line-clamp-2">广西大学2025年接收推荐免试研究生工作已经结束，现将拟录取名单予以公示，公示期10个工作日。公示期内，如有异议，请将意见以书面形式向研究生院招生办反映，并署真实姓名和单位名称</p>
                    <div className="text-[#1456A2] text-xs bg-[#DDECFF] w-fit px-[6px] py-[3px] mb-[5px] md:mb-[14px]">拟录取名单</div>
                    <p className="text-[#999] text-xs md:text-[14px] md:leading-[14px]">2024-11-21 16:01南开大学</p>
                  </div>
                </Link>
              </li>
              <li className="border-b border-[#E2E2E2] py-[10px] lg:py-[20px] xl:py-[38px] group">
                <Link href='#' className="flex items-start group">
                  <div className="relative w-[160px] md:w-[210px] h-[110px] md:h-[138px] lg:h-[143px] rounded-[10px] overflow-hidden mr-[10px] md:mr-[20px] lg:mr-[54px]">
                    <Image src='https://picsum.photos/210/143' alt="" fill className="group-hover:scale-110 transition-all duration-500" />
                  </div>
                  <div className="flex-1">
                    <h3 className="text-[14px] md:text-base xl:text-[20px] md:leading-[20px] mb-[8px] md:mb-[15px] text-[#333] line-clamp-1 group-hover:text-[#1456A2] transition-colors">《教育部认可84大保研加分竞赛盘点表》.xlsx</h3>
                    <p className="text-xs md:text-sm xl:text-base text-[#999] md:leading-[22px] max-w-[1000px] mb-[5px] md:mb-[10px] lg:mb-[16px] line-clamp-2">广西大学2025年接收推荐免试研究生工作已经结束，现将拟录取名单予以公示，公示期10个工作日。公示期内，如有异议，请将意见以书面形式向研究生院招生办反映，并署真实姓名和单位名称</p>
                    <div className="text-[#1456A2] text-xs bg-[#DDECFF] w-fit px-[6px] py-[3px] mb-[5px] md:mb-[14px]">拟录取名单</div>
                    <p className="text-[#999] text-xs md:text-[14px] md:leading-[14px]">2024-11-21 16:01南开大学</p>
                  </div>
                </Link>
              </li>
            </ul>
            <Pagination className="mt-[20px] md:mt-[30px] lg:mt-[40px]">
              <PaginationContent>
                <PaginationItem>
                  <Button asChild variant='outline' className="bg-[#f5f5f5] rounded-none hover:bg-[#1456A2] hover:text-white active:bg-[#204b7b] active:text-white">
                    <Link href='javascript:;'>上一页</Link>
                  </Button>
                </PaginationItem>
                <PaginationItem>
                  <Button asChild variant='outline' className="bg-[#f5f5f5] rounded-none hover:bg-[#1456A2] hover:text-white active:bg-[#204b7b] active:text-white">
                    <Link href='javascript:;'>1</Link>
                  </Button>
                </PaginationItem>
                <PaginationItem>
                  <Button asChild variant='outline' className="bg-[#f5f5f5] rounded-none hover:bg-[#1456A2] hover:text-white active:bg-[#204b7b] active:text-white">
                    <Link href='javascript:;'>2</Link>
                  </Button>
                </PaginationItem>
                <PaginationItem>
                  <Button asChild variant='outline' className="bg-[#f5f5f5] rounded-none hover:bg-[#1456A2] hover:text-white active:bg-[#204b7b] active:text-white">
                    <Link href='javascript:;'>3</Link>
                  </Button>
                </PaginationItem>
                <PaginationItem>
                  <Button asChild variant='outline' className="bg-[#f5f5f5] rounded-none hover:bg-[#1456A2] hover:text-white active:bg-[#204b7b] active:text-white">
                    <Link href='javascript:;'>4</Link>
                  </Button>
                </PaginationItem>
                <PaginationItem>
                  <PaginationEllipsis />
                </PaginationItem>
                <PaginationItem>
                  <Button asChild variant='outline' className="bg-[#f5f5f5] rounded-none hover:bg-[#1456A2] hover:text-white active:bg-[#204b7b] active:text-white">
                    <Link href='javascript:;'>下一页</Link>
                  </Button>
                </PaginationItem>
              </PaginationContent>
            </Pagination>
          </div>
        </section>
      </div>
    </ReactLenis>
  )
}

export default News